<template>
  <div id="hello"></div>
</template>

<script>
import * as echarts from "echarts";

import geoJson from "./chinaMapData.js"; //包含省份的 中国地图
// import coordtransform from "coordtransform";

export default {
  name: "MapDemo",
  data() {
    return {
      dataIndex: 0,
      mTime: null,
    };
  },
  props: {
    msg: String,
  },
  methods: {
    // convertCoord(coord) {
    //   const gcj02 = coordtransform.wgs84togcj02(coord[0], coord[1]);
    //   const bd09 = coordtransform.gcj02tobd09(gcj02[0], gcj02[1]);
    //   return bd09;
    // },
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("hello"));
    var scatterData = [
      {
        name: "新疆",
        value: "2945米",
      },
      {
        name: "西藏",
        value: "2945米",
      },
      {
        name: "内蒙古",
        value: "2945米",
      },
      {
        name: "青海",
        value: "2945米",
      },
      {
        name: "四川",
        value: "2945米",
      },
      {
        name: "黑龙江",
        value: "2945米",
      },
      {
        name: "甘肃",
        value: "2945米",
      },
      {
        name: "云南",
        value: "2945米",
      },
      {
        name: "广西",
        value: "2945米",
      },
      {
        name: "湖南",
        value: "2945米",
      },
      {
        name: "陕西",
        value: "2945米",
      },
      {
        name: "广东",
        value: "2945米",
      },
      {
        name: "吉林",
        value: "2945米",
      },
      {
        name: "河北",
        value: "2945米",
      },
      {
        name: "湖北",
        value: "2945米",
      },
      {
        name: "贵州",
        value: "2945米",
      },
      {
        name: "山东",
        value: "2945米",
      },
      {
        name: "江西",
        value: "2945米",
      },
      {
        name: "河南",
        value: "2945米",
      },
      {
        name: "辽宁",
        value: "2945米",
      },
      {
        name: "山西",
        value: "2945米",
      },
      {
        name: "安徽",
        value: "2945米",
      },
      {
        name: "福建",
        value: "2945米",
      },
      {
        name: "浙江",
        value: "2945米",
      },
      {
        name: "江苏",
        value: "2945米",
      },
      {
        name: "重庆",
        value: "2945米",
      },
      {
        name: "宁夏",
        value: "2945米",
      },
      {
        name: "海南",
        value: "2945米",
      },
      {
        name: "台湾",
        value: "2945米",
      },
      {
        name: "北京",
        value: "2945米",
      },
      {
        name: "天津",
        value: "2945米",
      },
      {
        name: "上海",
        value: "2945米",
      },
      {
        name: "香港",
        value: "2945米",
      },
      {
        name: "澳门",
        value: "2945米",
      },
    ];

    // 绘制图表
    let option = {
      // backgroundColor: "#fff",
      geo3D: {
        show: true,
        map: "centerMap",
        left: "4%", //偏移量调整
        top: "5%", //偏移量调整
        roam: true,
        zoom: 10,
        regionHeight: 5,
        label: {
          show: true,
          distance: 200,
          borderRadius: 0,
          distanca: 0,
          fontSize: 18,
          color: "#ffffff", // 地图初始化区域字体颜色
          borderWidth: 0,
          borderColor: "#ffffff",
        },
        itemStyle: {
          // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
          color: "#271f71", // 地图板块的颜色
          fontSize: 30,
          opacity: 1, // 图形的不透明度 [ default: 1 ]
          borderWidth: 10, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
          borderColor: "#6a63f4", // 图形描边的颜色。[ default: #333 ]
        },
        emphasis: {
          label: {
            show: true,
            color: "#000000", //悬浮字体颜色
            fontSize: 18,
          },
          itemStyle: {
            color: "#e2e1e1",
            opacity: 1,
          },
        },
        // shading: "color",
        light: {
          // 光照阴影
          main: {
            color: "#FFFFFF", // 光照颜色
            intensity: 2, // 光照强度
            shadowQuality: "light", // 阴影亮度
            shadow: true, // 是否显示阴影
            alpha: 50,
            beta: 10,
          },
        },
        regions: [],
        viewControl: {
          projection: "perspective",
          autoRotate: false,
          autoRotateAfterStill: 3,
          distance: 120, //默认比例
          alpha: 83,
          beta: 0.48683006219769,
          minAlpha: 5,
          maxAlpha: 50,  // 角度
          minBeta: -1036800,
          maxBeta: 1036800,
          animation: true,
          animationDurationUpdate: 1000,
          animationEasingUpdate: "cubicInOut",
          orthographicSize: 60,
          autoRotateDirection: "cw",
          autoRotateSpeed: 10,
          damping: 0.8,
          rotateSensitivity: 1,
          zoomSensitivity: 1,
          panSensitivity: 1,
          panMouseButton: "middle",
          rotateMouseButton: "left",
          minDistance: 40,
          maxDistance: 400,
          maxOrthographicSize: 400,
          minOrthographicSize: 20,
          center: [0, 0, 0, 0],
        },
      },
      series: [
        {
          type: "map3D", // 加载series数据
          seriesIndex: 0, // 第一个系列
          show: true,
          map: "centerMap",
          regionHeight: 0,
          boxHeight: 500,
          // left: 0,
          left: "4%", //偏移量调整
          top: "5%", //偏移量调整
          itemStyle: {
            // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
            color: "rgba(37, 37, 38,1)", // 地图板块的颜色
            opacity: 0, // 图形的不透明度 [ default: 1 ]
            borderWidth: 0, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
            borderColor: "#69E8F5", // 图形描边的颜色。[ default: #333 ]
          },

          label: {
            show: true,
            color: "#FFFFFF",
          },
          regions: [],
          zlevel: 5,
          viewControl: {
            projection: "perspective",
            autoRotate: false,
            autoRotateAfterStill: 3,
            distance: 100.1931248935421, //默认比例
            alpha: 83.592048936336816,
            beta: 0.48683006219769,
            minAlpha: 5,
            maxAlpha: 40,
            minBeta: -1036800,
            maxBeta: 1036800,
            animation: true,
            animationDurationUpdate: 1000,
            animationEasingUpdate: "cubicInOut",
            orthographicSize: 60,
            autoRotateDirection: "cw",
            autoRotateSpeed: 10,
            damping: 0.8,
            rotateSensitivity: 1,
            zoomSensitivity: 1,
            panSensitivity: 1,
            panMouseButton: "middle",
            rotateMouseButton: "left",
            minDistance: 40,
            maxDistance: 400,
            maxOrthographicSize: 400,
            minOrthographicSize: 20,
            center: [0, -5, 0],
          },
        },
      ],
    };
    myChart.showLoading();

    echarts.registerMap("centerMap", geoJson.chinaMapData);
    var mapFeatures = echarts.getMap("centerMap").geoJson.features;
    myChart.hideLoading();
    let currentIdx = 0;
    function highlightNext() {
      if (currentIdx++ >= 0) {
        // 防止下标增加到超过区域数组长度
        currentIdx %= mapFeatures.length;
      }
      highlightRegion(currentIdx); // 此处的currentIdx经过if判断，已经+1了
      setTimeout(highlightNext, 5000);
    }

    function highlightRegion(index) {
      // 高亮地图区域，改变对应的散点样式
      let regionName = mapFeatures[index].properties.name; // 高亮的区名
      option.geo3D.regions = [
        // 高亮3D地图对应的区块
        {
          name: regionName,
          label: {
            show: true,
            color: "##000000",
          },
          itemStyle: {
            color: "#ffffff",
            opacity: 1,
          },
        },
      ];

      // 当前高亮区域有散点，需删除stroke动效中的该条数据并在fill动效中增加该条数据

      myChart.setOption(option);
      showTip({ name: regionName, data: { a: 1 } });
      // myChart.dispatchAction({
      //   // 触发散点高亮事件，改变标签样式
      //   type: "mousemove",
      //   seriesIndex: 1, // series中的第二个图层（fill散点图层）
      //   dataIndex: 0, // 高亮第一条数据，由于fill散点图层只有一条数据，这里可以不指定
      // });

      // myChart.on("mouseover", () => {
      //   console.log("mouseover");
      //   // 停止定时器，清除之前的高亮
      //   clearInterval(this.mTime);
      //   this.mTime = "";
      //   myChart.dispatchAction({
      //     type: "downplay",
      //     seriesIndex: 0,
      //     dataIndex: this.dataIndex,
      //   });
      // });
    }

    myChart.setOption(option);

    let tooltip = null;
    const showTip = (params) => {
      // let target = that.findParam(that.allData, "NAME", params.name)
      // let event = params.event;
      // let mouseX = event.offsetX;
      // let mouseY = event.offsetY;
      // let arr = ["xx县", "xx县", "xx县", "xx县", "xx县"];
      // let leftDistance = mouseX + 3 + "px";
      // let topDistance = mouseY + 3 + "px";
      // if (arr.includes(params.name)) {
      //   leftDistance = mouseX + -275 + "px";
      //   topDistance = mouseY + -183 + "px";
      // }
      console.log(params);
      // 如果自定义div已经存在，则更新位置和内容
      if (tooltip) {
        // tooltip.style.left = leftDistance; // 更新div的left位置
        // tooltip.style.top = topDistance; // 更新div的top位置
        // tooltip.innerHTML = ` <div style="">${params.name}- ${params.data}</div>`;
      } else {
        // 如果自定义div不存在，则创建它
        // tooltip = document.createElement("div");
        // tooltip.className = "container"; // 设置div的样式类名
        // tooltip.innerHTML = `<div style="">...</div>`; // 设置div的内容
        // tooltip.style.left = leftDistance; // 更新div的left位置
        // tooltip.style.top = topDistance; // 更新div的top位置
        // let distance = myChart.getOption().series[0].viewControl.distance; // 获取当前的distance值
        //悬浮框大小自适应
        // let newScale = distance / 175.8;
        // tooltip.style.transform = "scale(" + newScale + ")";
        // 将div添加到页面中
        // document.body.appendChild(tooltip);
      }
    };
    // let that = this
    myChart.on("mouseover", (e) => showTip(e));
    // 监听鼠标离开事件，用于隐藏自定义的div
    myChart.on("globalout", function (params) {
      // 隐藏自定义的div
      // if (tooltip) {
      //   tooltip.remove();
      //   tooltip = null;
      // }
    });
    // this.mapActive(myChart)
    highlightNext();
  },
};
</script>

<style scoped>
#hello {
  width: 1200px;
  height: 960px;
  z-index: 9999;
  /* border: 20px solid red;s */
  /* border-color: rgba(0, 0, 0, 0) !important; */
  /* transform: translate(-50%, -50%); */
}
</style>
<style>
.container {
  top: 10px;
  left: 10px;
  position: fixed;
  height: 120px;
  width: 300px;
  border: 1px solid;
  background: aquamarine;
  color: red;
}
</style>
